<template>
	<view class="page">
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
			@clickItem="onClickItem" @searchValue="search"></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="height: 100%;margin-top: -90rpx;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="loadMoreData">
					<view class="contener">
						<view class="contener700">
							<view class="orderListbox" v-for="(item,index) in orderList" :key="item.id">
								<view class="between">
									<text style="font-size: 30rpx;">订单号:{{item.orderNum}}</text>
									<rich-text :nodes="getStatus(item.status)"></rich-text>
								</view>
								<view class="orderListxinxi">
									<!-- <view>
										<image class="orderListboximg" :src="imgapi+JSON.parse(item.snapshot)[0].avatar"
											mode=""></image>
									</view> -->
									<view style="">
										<view style="margin-top: 5rpx;">
											<!-- 标题 -->
											<view class="between2">
												<view>
													{{item.plotName}}
												</view>
												
											</view>
											<view class="snapshot">
												<!-- 简介，这里也优化一下样式，放在标题的下面，然后字数长就自动换行和展示.....省略号 -->
												<text>区域：{{item.regionName}}</text>
											</view>
											
										</view>
									</view>
								</view>
								<view class="orderListprice">
									<view style="color: #eb3941;">
										合计:￥{{item.payAmount}}
									</view>
									<view class="paybtnBox">
										<button class="paybtn greenborder" @tap="tzorderDetails(item)" v-if="item.status===0">立即支付</button>
										<!-- 这里样式改一下，改成红框 然后两个按钮尺寸都改小一点 -->
										<button class="paybtn redborder" v-if="item.status === 0"
											@click="cancelOrder(item.orderNum)">取消订单</button>

                    <button class="paybtn balckborder" @tap="tzorderDetails(item,true)" v-else-if="item.status === 1">土地续期</button>
										<button @tap="tzorderDetails(item)" class="paybtn balckborder">订单详情</button>
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				orderList: [],
				// 0待付款 1已付款 -1已取消
				items: ['全部', '待付款', '已付款', '已取消'],
				current: 0,
				ifBottomRefresh: false,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
					type: 1,
					status: ""
				},
				imgapi: "",
				status:'more',
				timer:null,
			};
		},
		onLoad(e) {
			this.getList()
		},
		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				console.log("触底")
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getList()
			} else {
				this.status ="noMore"
			}
		},
		onBackPress(e) {
			uni.switchTab({
				url: './mineInfo'
			});
			return true
		},
		methods: {
			
			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if(!this.timer){
					this.timer = setTimeout(()=>{
						if (this.status != 'noMore') {
							console.log("触底")
							this.status = 'loading';
							this.ifBottomRefresh = true
							//正式服去掉这个延时器
							this.getList()
						} else {
							console.log('123')
							this.status = "noMore"
						}
						this.timer = null
					},500)
				}
			},
			
			tzorderDetails(item,isRenewal = false){
        item.isRenewal = isRenewal;
				let items=JSON.stringify(item)
				uni.navigateTo({
					url:`./rentOrderDetail?item=${items}`
				})
			},
			cancelOrder(orderNum) {
				let _this = this
				uni.showModal({
					title: '取消订单',
					content: '确定取消该采摘订单吗',
					success: function(res) {
						if (res.confirm) {
							_this.$axios({
								url: "user/rent/cancelOrder",
								method: "post",
								data: {
									orderNum: orderNum,
								}
							}).then((res) => {
								uni.showToast({
									title: res.result,
									icon: 'none',
									duration: 2000,
									success() {
										console.log('2333',_this.params);
										let status = _this.params.status
										_this.cleanList()
										_this.params.status = status
										_this.getList()
									}
								})
								
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			cleanList() {
				this.orderList = [];
				this.params = {
					pageNo: 1,
					pageSize: 10,
					type: 1
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			getStatus(status) {
				// 0待付款 1已付款 -1已取消
				switch (status) {
					case 0:
						return "<font style='color: #4e4e4e'>待付款</font>"
					case 1:
						return "<font style='color: #139e4c'>已付款</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
				}
			},

			getList() {
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "/user/rent/orderList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: this.params.type,
						status: this.params.status
					}
				}).then((res) => {
					console.log('resaaaaa',res);
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						if (this.ifBottomRefresh) {
							this.orderList = this.orderList.concat(res.result.list)
						} else {
							this.orderList = res.result.list
						}
					} else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					this.params.pageNo++;
				})
			},
			onClickItem(val) {
				this.current = val.currentIndex
				console.log(val)
			},
			//搜索框的值
			search(e){
				console.log('eee',e)
			},
			scollSwiper(e) {
				this.cleanList()
				switch (e.detail.current) {
					case 0:
						this.params.status = ""
						break;
					case 1:
						this.params.status = "0"
						break;
					case 2:
						this.params.status = "1"
						break;
					case 3:
						this.params.status = "3"
						break;
					case 4:
						this.params.status = "-1"
						break;
				}
				this.current = e.target.current
				this.getList()
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
	}

	/deep/ .tabControl {
		height: 10vh;
		background-color: #aaff00;
	}

	/deep/ .swiper {
		height: 90vh;
	}

	.page {
		padding-top: 200rpx;
		height: 100%;
	}

	.orderListbox {
		margin-top: 10rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		/* height: 280rpx; */
		padding: 20rpx;
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;
	}
	.between2{
		display: flex;
		justify-content: space-between;
		width: 520rpx;
	}

	.orderListboximg {
		margin-top: 10rpx;
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		height: 130rpx;
		display: flex;
	}

	.orderListprice {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}

	.snapshot {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 35rpx;
		color: #6c6c6d;
	}
</style>
